<script setup lang="tsx">
import { useNRTCHK } from '@/hooks/rtc'
const {
  peers,
  config,
  ready,
  publish,
  streams,
  consumers,
  producers,
  camera,
  cameras,
  microphone,
  microphones,
  speaker,
  speakers,
  volume,
  volumes,
} = useNRTCHK()
import {
  InformationCircleIcon,
  WindowIcon,
  VideoCameraIcon,
  VideoCameraSlashIcon,
  MicrophoneIcon,
  SpeakerWaveIcon,
  SpeakerXMarkIcon,
  PowerIcon
} from '@heroicons/vue/24/outline'
import { type NRTC } from 'nrtc-web'
import { useRoomRTC } from './[id]'

const {
  refs,

  modal,
  toggleModal,

  videoView,
  screenView,
  leaveRoom,

  switchMic,
  switchSpeaker,
  switchCamera,

  toggleLocalAudio,
  toggleLocalScreen,
  toggleLocalVideo,

  requestConsumer,
  openConsumerInfo,
} = useRoomRTC()



</script>
<template>
  <main>
    <table class="table-fixed w-full border-collapse border border-slate-500">
      <thead>
        <tr>
          <th>Producer</th>
          <th>autoConsumer</th>
          <th>request@consume</th>
        </tr>
      </thead>
      <tbody class="text-center">
        <tr v-for="producer in producers" :key="producer.producerId">
          <td>{{ producer.producerId }}</td>
          <td>{{ producer.autoConsumer }}</td>
          <td class='py-2'>
            <button :disabled="producer.autoConsumer" class="btn btn-sm px-2 py-1 rounded-md"
              :class="[producer.autoConsumer ? ' btn-disabled' : 'btn-primary']" @click='requestConsumer(producer)'>
              consume
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <table class="table-fixed w-full border-collapse border border-slate-500">
      <thead>
        <tr>
          <th>Consumer</th>
          <th>currentVolume</th>
        </tr>
      </thead>
      <tbody class="text-center">
        <tr v-for="consumer in consumers" :key="consumer.consumerId">
          <td>
            {{ consumer.consumerId }}
            <button @click='openConsumerInfo(consumer, true)'>
              <InformationCircleIcon width='24' height='24' />
            </button>
          </td>
          <td>
            <ul>
              <li v-if='consumer.kind == "video"'>
                <div class='countdown font-mono'>
                  <span :style="{ '--value': volumes[consumer.peerId] || 0 }" />
                </div>

              </li>

              <li v-else :ref="refs.set">
                <div>
                  {{ consumer.kind }}
                </div>
              </li>
            </ul>

          </td>
        </tr>
      </tbody>
    </table>

    <section v-if="Object.values(streams).some((b) => b)" class='p-4 space-y-4'>
      <header>自己的流</header>
      <ul class='grid grid-cols-3 gap-4'>
        <li v-if='streams.audio'>
          <div class='card bg-base-100 shadow-xl'>
            <div class='aspect-video flex items-center justify-center'>
              <div class="radial-progress" :style="{ '--value': volume.toFixed() }" role="progressbar">
                {{ volume.toFixed() }}
              </div>
            </div>
            <div class='card-body'>
              <h2>麦克风</h2>
              <p>麦克风音量</p>
              <div class="card-actions justify-end">
                <button class="btn btn-primary" @click='toggleLocalAudio'>关流</button>
              </div>
            </div>
          </div>
        </li>

        <li v-if='streams.video'>
          <div class='card bg-base-100 shadow-xl w-96'>
            <figure class='aspect-video flex items-center justify-center relative' ref='videoView'>
            </figure>
            <div class='card-body'>
              <h2>摄像头</h2>
              <p>摄像头画面</p>
              <div class="card-actions justify-end">
                <button class="btn btn-primary" @click='toggleLocalVideo'>关流</button>
              </div>
            </div>
          </div>
        </li>

        <li v-if='streams.screen'>
          <div class='card bg-base-100 shadow-xl w-96'>
            <figure class='aspect-video flex items-center justify-center relative' ref='screenView'>
            </figure>
            <div class='card-body'>
              <h2>屏幕共享</h2>
              <p>屏幕共享画面</p>
              <div class='card-actions justify-end'>
                <button class="btn btn-primary" @click='toggleLocalScreen'>关流</button>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </section>

    <footer class="fixed bottom-0 inset-x-0 p-4 flex items-center border-t bg-slate-50">
      <div class="grid grid-cols-4 gap-4 flex-1">
        <div class="flex flex-col items-center justify-center gap-y-4">
          <button tabindex="0" role="button" class="btn btn-square"
            :class="[ready.audio || publish.audio ? 'btn-error' : 'btn-primary']" @click="toggleLocalAudio">
            <MicrophoneIcon class="w-4 h-4" />
          </button>
          <div class="dropdown dropdown-right dropdown-hover">
            <button tabindex="0" role="button" class="btn btn-primary">
              <SpeakerWaveIcon class="w-4 h-4" />
            </button>
            <div tabindex="0" class="menu dropdown-content shadow bg-base-200 rounded-box z-[1] p-2 h-fit w-fit">
              <input type="range" min="0" max="100" :value="config.micVolume" class="range range-xs w-40" />
            </div>
          </div>

          <div class="dropdown dropdown-top">
            <button tabindex="0" role="button" class="btn btn-sm flex">
              <div v-if="microphone" class="truncate">
                {{ microphone.label }}
              </div>
              <p v-else>麦克风</p>
            </button>
            <ul tabindex="0" class="menu dropdown-content shadow bg-base-200 rounded-box z-[1] max-w-lg p-2 mb-2">
              <li v-for="$micphone in microphones" :key="$micphone.deviceId">
                <button class="truncate" :class="[$micphone.deviceId == microphone?.deviceId ? ' btn-active' : '']"
                  @click="switchMic($micphone.deviceId)">
                  {{ $micphone.label }}
                </button>
              </li>
            </ul>
          </div>
        </div>

        <div class="flex flex-col items-center justify-center gap-y-2">
          <button class="btn btn-square btn-primary">
            <SpeakerWaveIcon class="w-4 h-4" />
          </button>

          <div class="dropdown dropdown-top">
            <button tabindex="0" role="button" class="btn btn-sm flex">
              <div v-if="speaker" class="truncate">
                {{ speaker.label }}
              </div>
              <p v-else>扬声器</p>
            </button>
            <ul tabindex="0" class="menu dropdown-content shadow bg-base-200 rounded-box z-[1] max-w-lg p-2 mb-2">
              <li v-for="$speaker in speakers" :key="$speaker.deviceId">
                <button class="truncate" :class="[$speaker.deviceId == speaker?.deviceId ? ' btn-active' : '']"
                  @click='switchSpeaker($speaker.deviceId)'>
                  {{ $speaker.label }}
                </button>
              </li>
            </ul>
          </div>
        </div>

        <div class="flex flex-col items-center justify-center gap-y-2">
          <div class="tooltip" data-tip="开始直播">
            <button class="btn btn-square" :class="[ready.video ? 'btn-error' : 'btn-primary']"
              @click="toggleLocalVideo">
              <VideoCameraSlashIcon v-if="ready.video" class="w-4 h-4" />
              <VideoCameraIcon v-else class="w-4 h-4" />
            </button>
          </div>

          <div class="dropdown dropdown-top">
            <button tabindex="0" role="button" class="btn btn-sm flex">
              <div v-if="camera" class="truncate">
                {{ camera.label }}
              </div>
              <p v-else>没有相机</p>
            </button>

            <ul tabindex="0" class="menu dropdown-content shadow bg-base-200 rounded-box z-[1] max-w-lg p-2 mb-2">
              <li v-for="$camara in cameras" :key="$camara.deviceId">
                <button class="truncate" :class="[$camara.deviceId == camera?.deviceId ? ' btn-active' : '']">
                  {{ $camara.label }}
                </button>
              </li>
            </ul>
          </div>
        </div>

        <div class="flex flex-col items-center justify-center gap-y-2">
          <div class="tooltip" data-tip="共享屏幕">
            <button class="btn btn-square" :class="[ready.screenVideo ? 'btn-error' : 'btn-primary']"
              @click="toggleLocalScreen">
              <WindowIcon class="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>

      <div class="">
        <div class="tooltip" data-tip="退出房间">
          <button class="btn btn-square btn-error p-2" @click="leaveRoom">
            <PowerIcon class="text-white" />
          </button>
        </div>
      </div>
    </footer>

    <dialog ref='modal' class="modal">
      <div class="modal-box">
        <h3 class="text-lg font-bold">Hello!</h3>
        <p class="py-4">Press ESC key or click the button below to close</p>
        <div class="modal-action">
          <form method="dialog">
            <!-- if there is a button in form, it will close the modal -->
            <button class="btn">Close</button>
          </form>
        </div>
      </div>
    </dialog>
  </main>
</template>
